<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<scroll-view scroll-y class="content">
			<u-list  v-if="list.length > 0">
				<u-list-item v-for="item in list" :key="item.id">
					<view class="address-item" >
						<view class="info"  @click="selectAddress(item)">
							<text class="name">{{ item.consignee }}</text>
							<text class="phone">{{ item.phone }}</text>
							<view class="tag" v-if="item.is_default">默认</view>
						</view>
						<view class="address"  @click="selectAddress(item)" >{{ item.province }}{{ item.city }}{{ item.district }}{{ item.community }}{{ item.address }}</view>
						<view class="actions">
							<u-button size="mini" @click="setDefault(item)" :type="item.is_default ? 'primary' : 'info'">
								{{ item.is_default ? '默认地址' : '设为默认' }}
							</u-button>
							<u-button type="warning" size="mini" @click="editAddress(item.id)">编辑</u-button>
							<u-button type="error" size="mini" @click="deleteAddress(item.id)">删除</u-button>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<!-- 无数据时显示图片 -->
			<view v-else class="no-data">
				<image src="/static/mescroll-empty.png" mode="aspectFit" class="no-data-img"></image>
				<text class="no-data-text">暂无数据</text>
			</view>
		</scroll-view>

		<!-- 新增按钮 -->
		<view class="footer">
			<u-button type="primary" @click="addAddress" icon="plus">新增地址</u-button>
		</view>
	</view>
</template>

<script>
import store from '@/store';
import { getAddressList, putAddressDefault, delAddress } from '@/apis/address_callback.js';
export default {
	data() {
		return {
			from: '', // 来源页面
			list: [] // 地址列表
		};
	},
	onLoad(options) {
		this.from = options.from || '';
	},
	onShow() {
		this.loadAddressList();
	},
	methods: {
		// 加载地址列表
		async loadAddressList() {
			store.commit('setLoadingShow', true);
			getAddressList(
				{ user_id: uni.getStorageSync('userInfo').id },
				(res) => {
					this.list = res;
					store.commit('setLoadingShow', false);
				},
				(err) => {
					this.$refs.uToast.show({
						type: 'error',
						position: 'top',
						title: '错误',
						message: '获取失败'
					});
				}
			);
		},

		// 设置默认地址
		async setDefault(item) {
			if (item.is_default) {
				return;
			}
			putAddressDefault(
				item.id,
				() => {
					this.$refs.uToast.show({
						type: 'success',
						position: 'top',
						title: '提示',
						message: '修改成功'
					});
					store.commit('setLoadingShow', false);
					this.loadAddressList();
				},
				(err) => {
					this.$refs.uToast.show({
						type: 'error',
						position: 'top',
						title: '错误',
						message: '修改失败'
					});
				}
			);
		},

		// 删除地址
		deleteAddress(id) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除该地址吗？',
				success: async (res) => {
					if (res.confirm) {
						store.commit('setLoadingShow', true);

						delAddress(
							[id],
							() => {
								this.$refs.uToast.show({
									type: 'success',
									position: 'top',
									title: '提示',
									message: '删除成功'
								});
								store.commit('setLoadingShow', false);
								this.loadAddressList();
							},
							(err) => {
								this.$refs.uToast.show({
									type: 'error',
									position: 'top',
									title: '错误',
									message: '删除失败'
								});
							}
						);
					}
				}
			});
		},

		// 新增地址
		addAddress() {
			uni.navigateTo({ url: '/pages2/address/edit' });
		},

		// 编辑地址
		editAddress(id) {
			uni.navigateTo({ url: `/pages2/address/edit?id=${id}` });
		},

		// 选择地址（仅从订单页进入时生效）
		selectAddress(item) {
		  if (this.from === 'order') {
			uni.setStorageSync('selectedAddress', item);
			uni.navigateBack();
		  }
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/variables.scss'; // ✅ 必须引入

/* 优化后的样式 */
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

.content {
	padding: 24rpx; /* 增加容器内边距 */
	box-sizing: border-box;
}

/* 新增无数据样式 */
.no-data {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 70vh; /* 占据70%的视口高度 */
	padding: 40rpx;
	
	.no-data-img {
		width: 300rpx;
		height: 300rpx;
		opacity: 0.6;
	}
	
	.no-data-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 30rpx;
	}
}

.address-item {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	padding: 32rpx;
	position: relative;

	/* 双重边框效果 */
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04),
		// 外层浅阴影
		0 0 0 1rpx rgba(0, 0, 0, 0.06); // 内层边框阴影


}

.info {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;

	.name {
		font-size: $font-size-base;
		font-weight: 500;
		color: #333;
		margin-right: 24rpx;
	}

	.phone {
		font-size: $font-size-base;
		color: #666;
	}

	.tag {
		margin-left: auto;
		background: #ff5a5f;
		color: #fff;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: $font-size-base;
	}
}

.address {
	font-size: $font-size-base;
	color: #666;
	line-height: 1.6;
	padding-bottom: 32rpx;
	border-bottom: 1rpx solid #eee;
}

.actions {
	padding-top: 24rpx;
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;

	::v-deep .u-button {
		height: 56rpx;
		line-height: 56rpx;
		margin: 0;
		border-radius: 40rpx;
		padding: 0 28rpx;

		&--warning {
			background: #fff;
			color: #666;
			border: 1rpx solid #ddd;
		}

		&--error {
			background: #fff;
			color: #ff5a5f;
			border: 1rpx solid #ff5a5f;
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24rpx 32rpx;
	background: #fff;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.06);

	::v-deep .u-button {
		width: 100%;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: $font-size-base;
	}
}
</style>
